<template>
  <div class="person">
    <h2>需求：到水温达到60时 或者是水温达到80时 给服务器发请求</h2>
    <h2>当前水温为{{ temp }}</h2>
    <h2>当前水位为{{ height }}</h2>
    <button @click="changeTemp">水温 + 10</button>
    <button @click="changeHeight">水位 + 10</button>
  </div>

</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, watch, watchEffect} from 'vue'

//---------------------参数--------------------
let temp = ref(10)
let height = ref(0)


//----------------------方法----------------------
function changeTemp() {
  temp.value += 10
}

function changeHeight() {
  height.value += 10
}

//----------------watch------------------------
watch([temp, height], (value)=>{
  //从value中获取最新的水温 和 水位
  let [newTemp, newHeight] = value
  if(newTemp >= 60 || newHeight >= 80) {
    alert('警告')
  }
})

//----------------watchEffect-------------------
watchEffect(()=>{
  // 只要变化 就去调用这个
  if(temp.value >= 60 || height.value >= 80) {
    alert('警告')
  }
})



</script>

<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>